<template>
	<view :style="{
			background: itemData.style.bgcolor,
			padding: itemData.style.paddingTop + 'px ' + itemData.style.paddingLeft + 'px ' + itemData.style.paddingBottom + 'px ' + itemData.style.paddingLeft + 'px'
		}">
		<view class="drag optional">
			<view class="bg-box">
				<view class="d-s-c"
					style="z-index: 1;position: relative;margin-left: 20rpx;margin-top: 80rpx;margin-right: 20rpx;">
					<image lazy-load class="item-image" :src="userInfo.detail && userInfo.detail.avatarUrl || '/static/login-default.png'" mode="aspectFill"
						@click="gotoPage('/pages/user/set/set')"></image>
					<view class="d-c d-b-s white ww100" style="height: 102rpx;">
						<view class="d-b-c ww100">
							<template v-if="userInfo.detail">
								<view class="flex-1 d-s-c">
									<text class="fb f32">{{ userInfo.detail.nickName }}</text>
									<text class="ml20 grade"
										v-if="userInfo.detail.grade_id > 0">{{ userInfo.detail.grade.name }}</text>
								</view>
							</template>
							<text class="fb f32" v-else  @click="doLogin()">点击登录</text>
							<view class="news d-e-c">
								<!-- #ifdef H5 -->
								<text v-if="itemData.is_check && isWeixin()" class="icon iconfont icon-saoyisao1"
									@click="scanQrcode"></text>
								<!-- #endif -->
								<!-- #ifndef H5 -->
								<text v-if="itemData.is_check" class="icon iconfont icon-saoyisao1"
									@click="scanQrcode"></text>
								<!-- #endif -->
								<view class="pr">
									<view class="news_num" v-if="userInfo.msgcount && userInfo.msgcount!=0"></view>
									<text class="icon iconfont icon-kefu1"
										@click="gotoPage('/pagesPlus/chat/chat_list')"></text>
								</view>

							</view>
						</view>
						<view v-if="userInfo.detail">ID:{{ userInfo.detail.user_id }}</view>
					</view>
				</view>
				<view class="bg-base" :class="'bg-base-' + itemData.style.type"></view>
				<view class="diy-Base" :style="{ background: itemData.style.background }">
					<view class="list column-3">
						<view class="item" @click="gotoPage('/pages/order/myorder?dataType=payment')">
							<view class="item-text fb f32">{{ userInfo.orderCount.order_pay_count }}</view>
							<view class="item-text text-ellipsis">待支付订单</view>
						</view>
						<view class="item item-center" :style="'padding:0 ' + itemData.style.padding * 2 + 'rpx;'"
							@click="gotoPage('/pages/order/myorder')">
							<view class="item-text fb f32">{{ userInfo.orderCount.payment }}</view>
							<view class="item-text text-ellipsis">全部订单</view>
						</view> 
<!-- 						<view class="item" @click="gotoPage('/pages/user/my-wallet/my-wallet')">
							<view class="item-text fb f32">{{ userInfo.detail?userInfo.detail.balance:0 }}</view>
							<view class="item-text text-ellipsis">账户余额</view>
						</view>
						<view class="item item-center" :style="'padding:0 ' + itemData.style.padding * 2 + 'rpx;'"
							@click="gotoPage('/pages/user/points/points')">
							<view class="item-text fb f32">{{ userInfo.detail?userInfo.detail.points:0 }}</view>
							<view class="item-text text-ellipsis">{{ points_name() }}</view>
						</view> 
						-->
						<view class="item" @click="gotoPage('/pages/user/my-coupon/my-coupon')">
							<view class="item-text fb f32">{{ userInfo.coupon }}</view>
							<view class="item-text text-ellipsis">优惠券</view>
						</view>
					</view>
				</view>
			</view>
			<slot />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: ['itemData', 'userInfo'],
		created() {},
		methods: {
			/*跳转页面*/
			gotoDetail(e) {
				this.gotoPage(e.linkUrl);
			},
			/*扫一扫核销*/
			scanQrcode: function() {
				let self = this;
				//#ifdef H5
				// 只允许通过相机扫码
				self.userInfo.jweixin.scanQRCode({
					needResult: 1,
					scanType: ["qrCode", "barCode"],
					success: function(res) {
						self.gotoPage('/pages/store/clerkorder?order_no=' + res.resultStr);
					},
					error: function(res) {
						uni.showToast({
							title: '扫码失败，请重试'
						})
					}
				});
				//#endif
				//#ifndef H5
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						if (res.errMsg == 'scanCode:ok') {
							self.gotoPage('/pages/store/clerkorder?order_no=' + res.result);
						} else {
							uni.showToast({
								title: '扫码失败，请重试'
							})
						}
					}
				});
				//#endif
			},
		}
	};
</script>

<style lang="scss" scoped>
	.grade {
		display: block;
		padding: 0 16rpx;
		font-size: 22rpx;
		/* height: 36rpx; */
		line-height: 36rpx;
		border-radius: 40rpx;
		background-color: rgba($color: #000000, $alpha: 0.1);
		color: #ffffff;
	}

	.diy-Base {
		position: absolute;
		width: 710rpx;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
	}

	.diy-Base .list {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.diy-Base .list .item {
		padding: 20rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.diy-Base .list.column-3 .item {
		// width: 33.333333333%;
		width: 20%;
	}

	.diy-Base .list.column-4 .item {
		width: 25%;
	}

	.diy-Base .list.column-5 .item {
		width: 20%;
	}

	.diy-Base .list .item-text {
		width: 100%;
		padding: 8rpx 0;
		text-align: center;
	}

	.bg-box {
		overflow: hidden;
		height: 370rpx;
		position: relative;

		.news {

			.chat {
				width: 40rpx;
				height: 40rpx;
			}

			.icon {
				font-size: 40rpx;
				color: #fff;
				margin-left: 20rpx;
			}
		}

		.news_num {
			position: absolute;
			top: 0rpx;
			right: -6rpx;
			z-index: 100;
			border-radius: 50%;
			width: 16rpx;
			height: 16rpx;
			text-align: center;
			background: #F42A16;
		}
	}

	.bg-base {
		// width: 160%;
		height: 330rpx;
		position: absolute;
		right: 0;
		left: 0;
		top: 0;
		margin: auto;
		// border-radius: 50% 50% 50% 50%;
	}

	.bg-base-1 {
		background-color: #ff5704;
	}

	.bg-base-2 {
		background-color: #19ad57;
	}

	.bg-base-3 {
		background-color: #ffcc00;
	}

	.bg-base-4 {
		background-color: #33a7ff;
	}

	.bg-base-5 {
		background-color: #e4e4e4;
	}

	.bg-base-6 {
		background-color: #c8ba97;
	}

	.bg-base-7 {
		background-color: #623ceb;
	}

	.item-image {
		width: 102rpx;
		height: 102rpx;
		border-radius: 50%;
		background-color: #fff;
		overflow: hidden;
		margin-right: 20rpx;
		display: block;
		flex-shrink: 0;
	}

	.d-c-s {
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}
</style>